export const Pie5 = () => {
  return `
 
  <template>
  <div
    class="content"
    :style="{
      height: height,
      width: width,
    }"
  >
    <div id="huikuan-echarts" ref="echartsRef"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import "echarts";
const props = defineProps({
  width: {
    //列数据
    type: String,
    default: "930px",
  },
  height: {
    type: String,
    default: "492px",
  },
});

const myChart =  ref()
const echartsRef = ref()
const option = ref()
const bgColor = "#022B66"
const colorList = ["#4890FF","#4890FF","#4890FF",
"#25CEF0","#E8574C","#D0D96F","#fff"
];
const _pie = () =>{
    let dataArr = [];
            for (var i = 0; i < 3; i++) {
                 dataArr.push({
                        name: (i + 1).toString(),
                        value: 60,
                   
                    });
            }
            return dataArr;
}
const getEcharts = () => {
 	myChart.value = echarts.init(echartsRef.value);
		option.value = {
    
			backgroundColor:bgColor,
			series:[
				{
           color:colorList,
				  type:'pie',
				  zlevel:1, //所有图形的 zlevel 值。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
				  startAngle:90, //默认90，起始角度，支持范围[0, 360]
				  padAngle:8,
          radius:['50%','53%'], //数组的第一项是内半径，第二项是外半径 -- 圆环
				  label:{show:false}, //文本标签，可用于说明图形的一些数据信息
				  labelLine:{show:false}, //标签的视觉引导线配置
				 data:[{
                        name:2,
                        value: 60,
                   
                    },{
                        name:2,
                        value: 60,
                   
                    },{
                        name:2,
                        value: 60,
                   
                    }]
				  
				},
				{
            color:["#24B4FF","#24B4FF","#FCB400"],
	                type: 'pie',
	                zlevel: 2,
	                silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
	                startAngle: 360,
                  padAngle:8,
	                radius:['60%','68%'],
	                label: { show: false },
	                labelLine: { show: false },
	                data: _pie(),
	                animation: false, //是否开启动画
                 }
			]
		};
};
const doing = () =>{
    option.value.series[0].startAngle = option.value.series[0].startAngle - 5;
            option.value.series[1].startAngle = option.value.series[1].startAngle - 5;
            myChart.value.setOption(option.value);
}
const count = ref(0);
onMounted(() => {
  getEcharts();
  setInterval(() => {
              doing();
            }, 200);
});
</script>

<style scoped>
.content {
  position: relative;
  background-color: #022b66;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  border: 1px solid rgba(19, 127, 212, 0.6);
}
#huikuan-echarts {
  width: 100%;
  height: 100%;
}
</style>
  
  `;
};
